<template>
  <div class="home_container">
    <!-- 轮播图 -->
    <my-swiper class="swiper_box"></my-swiper>
    <div class="title">
      <p>我们的服务</p>
    </div>
    <!-- 底部分类 -->
    <category class="home_bottom_box"
              v-on:getRouterPathFromCategory="getRouterPathFromCategory"
              v-bind:toCategoryList="categoryList"></category>
  </div>
</template>
<script>
import { getAllCategory } from "../../api/http.js";
export default {
  created () {
    this.getAllCategory();
  },
  data () {
    return {
      categoryList: {},
    }
  },
  methods: {
    //   获取所有分类信息
    async getAllCategory () {
      const { data: res } = await getAllCategory();
      this.categoryList = res.data
    },
    // 获取从category传递的路由路径
    getRouterPathFromCategory (path) {
      // 将路由路径传递给Main组件
      this.$emit('getRouterPathFromHome', path);
    }
  }
}
</script>
<style lang="less" scoped>
.home_container {
  width: 100%;
  //   导航栏
  .banner_box {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    padding-bottom: 20px;
  }
  //   轮播图
  .swiper_box {
    margin-top: 90px;
  }
  .title {
    height: 60px;
    width: 200px;
    line-height: 60px;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: violet;
    p {
      color: white;
      font-weight: bold;
      font-family: "幼圆";
    }
  }
  .home_bottom_box {
    margin-top: 50px;
  }
}
</style>